import React from 'react'
import {Field} from 'rc-field-form'
import './index.less'
import { AccountContext } from '../../context';
const Item = ({ children, name, label, rules }: any) => {
  const { form } = React.useContext(AccountContext)


  return <div className='control-item'>
    {label ? <span className='control-item-label'>
      <label>{label}:</label>
    </span> : null}

    <div className='control-item-wrapper'>
    <Field rules={rules} name={name}>{children}</Field>
     </div>
     {form.getFieldError(name)?
   <div className='control-item-error'>
      {form.getFieldError(name)}
    </div> : null}

  </div>
  return
}
export default Item;